<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>staggered-animation</title>
    <style>
        .container {
            overflow-x: hidden;
            width: 100%;
        }
        .menu-toggler {
            display: none;
        }
        .menu-toggler-label {
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }
        .stagger-menu {
            list-style-type: none;
            margin: 16px 0;
            padding: 0;
        }
        .stagger-menu > li {
            margin-bottom: 8px;
            font-size: 18px;
            opacity: 0;
            transform: translateX(100%);
            transition-property: opacity,transform;
            transition-duration: .3s;
            transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        .menu-toggler:checked ~ .stagger-menu > li {
            opacity: 1;
            transform: translateX(0);
            transition-delay: calc(.055s * var(--i--));
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="checkbox" name="menu" id="menu" class="menu-toggler" />
        <label for="menu" class="menu-toggler-label">Menu</label>
        <ul class="stagger-menu">
            <li style="--i--:0;">Home</li>
            <li style="--i--:1;">Pricing</li>
            <li style="--i--:2;">Account</li>
            <li style="--i--:3;">Support</li>
            <li style="--i--:4;">About</li>
        </ul>
    </div>
</body>
</html>